<template>
  <div class="container">
    <!-- 学生  -->
    <el-row v-if="form.use_role === 'ROLE_student'">
      <el-col class="overAll">
        <el-card class="overAll-left">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>个人信息</h3>
          </div>
          <!-- 头像 -->
          <div style="text-align: center">
            <img v-if="form.sex === 1" src="@/assets/users/boy.png" class="image" />
            <img v-if="form.sex === 2" src="@/assets/users/girl.png" class="image" />
            <img v-if="form.sex !== 1 && form.sex !== 2" src="@/assets/users/USER.jpg" class="image" />
          </div>
          <!-- 列表 -->
          <div>
            <ul class="ul-show">
              <li class="list-group-item">
                <div>用户名:</div>
                <div class="pull-right">{{ form.username }}</div>
              </li>
              <li class="list-group-item">
                <div>性别:</div>
                <div class="pull-right">{{ form.sex == "1" ? "男" : form.sex == "2" ? "女" : "" }}</div>
              </li>
              <li class="list-group-item">
                <div>身份证号:</div>
                <div class="pull-right">{{ form.idCard }}</div>
              </li>
              <li class="list-group-item">
                <div>姓名:</div>
                <div class="pull-right">{{ form.nickname }}</div>
              </li>
              <li class="list-group-item">
                <div>手机号：</div>
                <div class="pull-right">{{ form.phone }}</div>
              </li>
              <li class="list-group-item">
                <div>学号：</div>
                <div class="pull-right">{{ form.username }}</div>
              </li>
              <li class="list-group-item">
                <div>学院：</div>
                <div class="pull-right">{{ form.department.departmentName }}</div>
              </li>
              <li class="list-group-item">
                <div>专业：</div>
                <div class="pull-right">{{ form.major.majorName }}</div>
              </li>
              <li class="list-group-item">
                <div>班级：</div>
                <div class="pull-right">{{ form.stuClass }}</div>
              </li>
              <li class="list-group-item">
                <div>入学时间：</div>
                <div class="pull-right" v-if="form.enrTime">{{ form.enrTime.substring(0, 4) }}</div>
              </li>
              <li class="list-group-item">
                <div>选修课学分：</div>
                <div class="pull-right">{{ form.credit }}</div>
              </li>
              <li class="list-group-item">
                <div>累计学习成果积分：</div>
                <div class="pull-right">{{ form.scores }}</div>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card class="overAll-right">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>基本信息</h3>
          </div>
          <div v-if="this.form.status === 0" style="color:red"> 此账号申请失败，请完善信息后重新申请</div>
          <!-- 按钮 -->
          <div>
            <el-button type="text" @click="showBasicInfo">基本资料(完善)</el-button>
            <el-button type="text" @click="showChangePassword">修改密码</el-button>
            <el-button type="text" @click="showChangeUpload">上传学生证</el-button>
          </div>
          <!-- 修改信息列表 -->
          <div v-if="showBasic">
            <el-form style="width: 800px" :model="form" :rules="rules" ref="form" label-width="110px">
              <el-form-item label="姓名：" prop="nickname">
                <el-input v-model="form.nickname" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号：" prop="idCard">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="学号：" prop="username">
                <el-input v-model="form.username" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="学院：" prop="departmentId" hide-required-asterisk="true">
                <el-select v-model="form.departmentId" placeholder style="width: 100%" @change="san()">
                  <el-option :label="item.departmentName" :value="item.departmentId" v-for="item in departments"
                    :key="item.departmentId"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="专业：" prop="majorId">
                <el-select v-model="form.majorId" placeholder style="width: 100%">
                  <el-option :label="item.majorName" :value="item.majorId" v-for="item in major"
                    :key="item.majorId"></el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="班级：" prop="stuClass">
                <el-input v-model.number="form.stuClass"  autocomplete="off"></el-input>
              </el-form-item>-->
              <el-form-item label="班级:" prop="stuClass">
                <el-input v-model="form.stuClass" autocomplete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item
                label="班级"
                prop="stuClass"
                
              >
                <el-input
                  type="stuClass"
                  v-model.number="form.stuClass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>-->
              <el-form-item label="性别：">
                <el-radio v-model="form.sex" :label="1">男</el-radio>
                <el-radio v-model="form.sex" :label="2">女</el-radio>
              </el-form-item>
              <el-form-item label="入学时间：" prop="enrTime">
                <el-input v-model="form.enrTime" type="date"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(); showUploadTip();">提交</el-button>
                <el-button class="cancel" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 修改密码列表 -->
          <div v-if="showPassword">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="原密码" prop="oldPass">
                <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitPass('ruleForm')">提交</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 上传证件 -->
          <div v-if="showUpload">
            <el-upload class="avatar-uploader" action :show-file-list="false" @click="submit"
              :http-request="handleFileUpload" :before-upload="beforeAvatarUpload">
              <img v-if="form.uploadFile" :src="`http://localhost:8015/user/` + form.uploadFile" class="avatar" />
              <i v-else class>
                <img src="@/assets/users/上传头像.png" alt style=" width: 300px; height: 300px; border: 1px solid gray" />
                <br />请上传学生证
              </i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 老师 -->
    <el-row v-if="form.use_role === 'ROLE_teacher'">
      <el-col class="overAll">
        <el-card class="overAll-left">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>个人信息</h3>
          </div>
          <!-- 头像 -->
          <div style="text-align: center">
            <img v-if="form.sex === 1" src="@/assets/users/boy.png" class="image" />
            <img v-if="form.sex === 2" src="@/assets/users/girl.png" class="image" />
            <img v-if="form.sex !== 1 && form.sex !== 2" src="@/assets/users/USER.jpg" class="image" />
          </div>
          <!-- 列表 -->
          <div>
            <ul class="ul-show">
              <li class="list-group-item">
                <div>用户名:</div>
                <div class="pull-right">{{ form.username }}</div>
              </li>
              <li class="list-group-item">
                <div>性别:</div>
                <div class="pull-right">{{ form.sex == "1" ? "男" : form.sex == "2" ? "女" : "" }}</div>
              </li>
              <li class="list-group-item">
                <div>身份证号:</div>
                <div class="pull-right">{{ form.idCard }}</div>
              </li>
              <li class="list-group-item">
                <div>姓名:</div>
                <div class="pull-right">{{ form.nickname }}</div>
              </li>
              <li class="list-group-item">
                <div>手机号：</div>
                <div class="pull-right">{{ form.phone }}</div>
              </li>

              <li class="list-group-item">
                <div>学院：</div>
                <div class="pull-right">{{ form.department.departmentName }}</div>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card class="overAll-right">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>基本信息</h3>
          </div>
          <!-- 按钮 -->
          <div>
            <el-button type="text" @click="showBasicInfo">基本资料(完善)</el-button>
            <el-button type="text" @click="showChangePassword">修改密码</el-button>
            <el-button type="text" @click="showChangeUpload">上传工作证</el-button>
          </div>
          <!-- 修改信息列表 -->
          <div v-if="showBasic">
            <el-form style="width: 800px" :model="form" :rules="rules" ref="form" label-width="110px">
              <el-form-item label="姓名：" prop="nickname">
                <el-input v-model="form.nickname" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号：" prop="idCard">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工号：" prop="username">
                <el-input v-model="form.username" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="学院：" prop="departmentId" hide-required-asterisk="ture">
                <el-select v-model="form.departmentId" placeholder style="width: 100%" @change="san()" disabled>
                  <el-option :label="item.departmentName" :value="item.departmentId" v-for="item in departments"
                    :key="item.departmentId"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-input v-model="form.departmentId" autocomplete="off"></el-input> -->
              <el-form-item label="性别：">
                <el-radio v-model="form.sex" :label="1">男</el-radio>
                <el-radio v-model="form.sex" :label="2">女</el-radio>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm();">提交</el-button>
                <el-button class="cancel" @click="reset">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 修改密码列表 -->
          <div v-if="showPassword">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="原密码" prop="oldPass">
                <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitPass('ruleForm')">提交</el-button>
                <el-button type="reset" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 上传证件 -->
          <div v-if="showUpload">
            <el-upload class="avatar-uploader" action :show-file-list="false" @click="submit"
              :http-request="handleFileUpload" :before-upload="beforeAvatarUpload">
              <img v-if="form.uploadFile" :src="`http://localhost:8015/user/` + form.uploadFile" class="avatar" />
              <i v-else class>
                <img src="@/assets/users/上传头像.png" alt style=" width: 300px; height: 300px; border: 1px solid gray" />
                <br />请上传工作证
              </i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 管理员 -->
    <el-row v-if="form.use_role === 'ROLE_admin'">
      <el-col class="overAll">
        <el-card class="overAll-left">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>个人信息</h3>
          </div>
          <!-- 头像 -->
          <div style="text-align: center">
            <img v-if="form.sex === 1" src="@/assets/users/boy.png" class="image" />
            <img v-if="form.sex === 2" src="@/assets/users/girl.png" class="image" />
            <img v-if="form.sex !== 1 && form.sex !== 2" src="@/assets/users/USER.jpg" class="image" />
          </div>
          <!-- 列表 -->
          <div>
            <ul class="ul-show">
              <li class="list-group-item">
                <div>用户名:</div>
                <div class="pull-right">{{ form.username }}</div>
              </li>
              <li class="list-group-item">
                <div>性别:</div>
                <div class="pull-right">{{ form.sex == "1" ? "男" : form.sex == "2" ? "女" : "" }}</div>
              </li>
              <li class="list-group-item">
                <div>身份证号:</div>
                <div class="pull-right">{{ form.idCard }}</div>
              </li>
              <li class="list-group-item">
                <div>姓名:</div>
                <div class="pull-right">{{ form.nickname }}</div>
              </li>
              <li class="list-group-item">
                <div>手机号：</div>
                <div class="pull-right">{{ form.phone }}</div>
              </li>

              <li class="list-group-item">
                <div>学院：</div>
                <div class="pull-right">{{ form.department.departmentName }}</div>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card class="overAll-right">
          <!-- 基本信息 -->
          <div class="headle">
            <h3>基本信息</h3>
          </div>
          <!-- 按钮 -->
          <div>
            <el-button type="text" @click="showBasicInfo">基本资料(完善)</el-button>
            <el-button type="text" @click="showChangePassword">修改密码</el-button>
            <el-button type="text" @click="showChangeUpload">上传工作证</el-button>
          </div>
          <!-- 修改信息列表 -->
          <div v-if="showBasic">
            <el-form style="width: 800px" :model="form" :rules="rules" ref="form" label-width="110px">
              <el-form-item label="姓名：" prop="nickname">
                <el-input v-model="form.nickname" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号：" prop="idCard">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工号：" prop="username">
                <el-input v-model="form.username" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="学院：" prop="departmentId" hide-required-asterisk="ture">
                <el-select v-model="form.departmentId" placeholder style="width: 100%" @change="san()" disabled>
                  <el-option :label="item.departmentName" :value="item.departmentId" v-for="item in departments"
                    :key="item.departmentId"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-input v-model="form.departmentId" autocomplete="off"></el-input> -->
              <el-form-item label="性别：">
                <el-radio v-model="form.sex" :label="1">男</el-radio>
                <el-radio v-model="form.sex" :label="2">女</el-radio>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm();">提交</el-button>
                <el-button class="cancel" @click="reset">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 修改密码列表 -->
          <div v-if="showPassword">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="原密码" prop="oldPass">
                <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitPass('ruleForm')">提交</el-button>
                <el-button type="reset" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 上传证件 -->
          <div v-if="showUpload">
            <el-upload class="avatar-uploader" action :show-file-list="false" @click="submit"
              :http-request="handleFileUpload" :before-upload="beforeAvatarUpload">
              <img v-if="form.uploadFile" :src="`http://localhost:8015/user/` + form.uploadFile" class="avatar" />
              <i v-else class>
                <img src="@/assets/users/上传头像.png" alt style=" width: 300px; height: 300px; border: 1px solid gray" />
                <br />请上传工作证
              </i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getInfo,
  modifyUser,
  uploadFile,
  modifyPassword,
  getDepartments,
  getMajorsByDepartmentId,
  getUsersByMajorId,
} from "@/api/user";
export default {
  data() {
    //  密码表单校验
    var validatePass = (rules, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rules, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rules, value, callback) => {
      if (!value) {
        return callback(new Error("原密码不能为空"));
      } else {
        callback();
      }
    };
    //  持久化数据
    return {
      form: {
        department: {
          departmentName: "",
        },
        major: {
          majorName: "",
        },
        sex: null,
      },
      inputValue: "", // 输入框的初始值
      originalForm: {}, // 保存初始值的变量
      departments: {}, //department表数据
      users: {}, //用户表数据
      major: {}, //专业表数据
      newdataId: "",
      password: "", //密码
      //v-if
      showBasic: true, // 基本信息
      showPassword: false, //密码
      showUpload: false, //上传
      // 修改密码表单数据
      ruleForm: {
        pass: "",
        checkPass: "",
        oldPass: "",
        rawPass: "",
      },
      //表单验证
      rules: {
        nickname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
            message: "身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 3, max: 11, message: "学号格式不正确", trigger: "blur" },
        ],
        secondaryCollege: [
          { required: true, message: "请选择院系", trigger: "blur" },
        ],
        speciality: [
          { required: true, messoldPass: "请输入专业", trigger: "blur" },
        ],
        stuClass: [
          { required: true, message: "班级不能为空", trigger: "blur" },

          {
            pattern: /^(?:[1-9]|1[0-5])$/,
            message: "输入格式不正确,只允许为数字",
            trigger: "blur",
          },
        ],

        // 密码/确认密码
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass: [{ validator: validatePass3, trigger: "blur" }],
      },
    };
  },
  // created生命周期钩子函数
  created() {
    this.info();
  },
  //  方法
  methods: {
    // 获取接口getInfo(接口)传值给this.form
    info() {
      getInfo().then((res) => {
        this.form = res.data;
        console.log(this.form);
        getDepartments()
          .then((res) => {
            this.departments = res.data;
            this.Majors(this.form.departmentId);
          })
          .catch((error) => {
            console.log("未能根据departmentid 获取department列表");
          });
      });
    },
    Majors(id) {
      getMajorsByDepartmentId(id).then((res) => {
        this.major = res.data;
      });
    },

    //  自定义上传函数 上传学生证
    handleFileUpload(data) {
      // console.log("上传事件",data);
      let photo = new FormData();
      photo.append("file", data.file);
      uploadFile(photo).then((res) => {
        // 请求成功
        console.log(res);
        this.form.uploadFile = res.data;
        modifyUser(this.form).then((res) => {
          // 根据接口返回的结果进行处理
          if (res.code == 200) {
            const Mpassword = "上传证件成功";
            this.open2(Mpassword);
            // alert("上传证件成功");
          } else {
            alert("修改失败");
          }
        });
      });
    },
    // 提交按钮
    submit() {
      console.log(this.$refs.upload + "12312312312");
      // 发送请求
      this.$refs.upload.submit();
    },
    successUpload(res) {
      console.log(res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";

      if (!isJPG) {
        this.$message.error("只能上传jpg/png文件");
      }
    },
    //请上传学生证
    showUploadTip() {
      if (!this.form.uploadFile) {
        alert("请上传证件");
        return;
      }
      // this.$message({
      //   message: "请上传学生证",
      //   type: "warning",
      // });
    },

    //v-if
    showBasicInfo() {
      this.showBasic = true;
      this.showPassword = false;
      this.showUpload = false;
    },
    showChangePassword() {
      this.showBasic = false;
      this.showPassword = true;
      this.showUpload = false;
    },
    showChangeUpload() {
      this.showUpload = true;
      this.showBasic = false;
      this.showPassword = false;
    },
    submitForm() {
      if (this.form.status === 0) {
        this.form.status = 1
        this.submitFormTow()
      } else {
        this.submitFormTow()
      }
    },

    //基本资料 提交按钮
    submitFormTow() {
      // console.log(this.$refs.form.validate);
      this.$refs.form.validate((valid) => {

        if (valid) {
          modifyUser(this.form).then((res) => {
            if (!this.form.uploadFile) {
              alert("修改失败，请上传证件");
            } else {
              if (res.code == 200) {
                let miss = "修改成功";
                this.open2(miss);
              } else {
                alert("修改失败");
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置按钮

    //  修改密码
    submitPass(niu) {
      this.$refs[niu].validate((valid) => {
        if (valid) {
          // 修改密码参数
          const data = {
            id: this.form.id,
            password: this.ruleForm.oldPass,
            newPassword: this.ruleForm.pass,
          };
          modifyPassword(data).then((res) => {
            console.log("res", res);
            // 处理返回结果
            if (res.code == 200) {
              const str = "修改密码成功";
              this.open2(str);
            } else {
              console.log("密码匹配失败哦");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //  修改密码重置按钮
    reset() {
      this.ruleForm.oldPass = "";
      this.ruleForm.checkPass = "";
      this.ruleForm.pass = "";
      this.form.stuClass = "";
      this.form.sex = "";
      this.form.phone = "";
      this.form.idCard = "";
      this.form.enrTime = "";
    },

    // 根据学院id 筛专业
    san() {
      const id = this.form.departmentId;
      console.log("id", id);
      this.Majors(id);
    },
    open2(miss) {
      this.$message({
        message: miss,
        type: "success",
      });

      this.info();
    },
  },
  mounted() {
    // this.originalForm = this.from; // 在组件挂载时保存初始值
    // this.originalForm = Object.assign({}, this.form); // 在组件挂载时保存初始值
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  margin: 10px 50px;
}

.overAll {
  display: flex;

  // 信息展示
  .overAll-left {
    flex: 2;
    margin-right: 20px;

    img {
      width: 150px;
      height: 150px;
      margin: 0px auto;
      border-radius: 100%;
      object-fit: cover;
    }

    .ul-show {
      margin: 10px auto;
      width: 75%;
      font-size: 15px;
    }

    .list-group-item {
      display: flex;
      border-bottom: 1px solid #e7eaec;
      border-top: 1px solid #e7eaec;
      margin-bottom: -1px;
      padding: 11px 0px;

      .pull-right {
        flex: 2;
        text-align: right;
      }
    }
  }

  //界面修改
  .overAll-right {
    flex: 4;
  }
}

// 学生证
.avatar-uploader .el-upload {
  border: 1px dashed gray;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 1px solid #409eff;
}

.avatar {
  width: 300px;
  height: 300px;
  display: block;
}
</style>